import 'package:flutter/material.dart';

class GridViewDemo1 extends StatelessWidget {
  const GridViewDemo1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GridView案例1'),
        backgroundColor: Colors.red,
      ),
      body: GridView(
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          //  设置侧轴方向子元素宽度，，此时每行展示的子元素个数是变化的
          maxCrossAxisExtent: 100,
          mainAxisSpacing: 10,
          crossAxisSpacing: 5,
          childAspectRatio: 4/3
        ),
        children:  [
          Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('黑马程序员1'),
          ),
           Container(
            color: Colors.pink,
            alignment: Alignment.center,
            child: const Text('黑马程序员2'),
          ),
           Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('黑马程序员3'),
          ),
           Container(
            color: Colors.yellow,
            alignment: Alignment.center,
            child: const Text('黑马程序员4'),
          ),
           Container(
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('黑马程序员5'),
          ),
           Container(
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text('黑马程序员6'),
          )
        ],
      ),
    );
  }
}